<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
<script>
  var myCan = document.getElementById("myCanvas");
  // 设置画笔
  var ct = myCan.getContext("2d");
// 贝塞尔曲线:
//   二次贝塞尔曲线:
//   一个起点,一个控制点,一个终点
 /* ct.beginPath();
  ct.moveTo(100,600);
  ct.quadraticCurveTo(300,100,600,400);
  ct.strokeStyle="orangered";
  ct.lineWidth=3;
  ct.stroke();
  ct.closePath();

  ct.beginPath();
  ct.moveTo(100,600);
  ct.lineTo(300,100);
  ct.lineTo(600,400);
  ct.strokeStyle="gray";
  ct.lineWidth=3;
  ct.stroke();
  ct.closePath();
*/

  //   三次贝塞尔曲线:
  //   一个起点,两个控制点,一个终点
  ct.beginPath();
  ct.moveTo(100,20);
  ct.bezierCurveTo(400,100,10,50,100,200);
  ct.strokeStyle="orangered";
  ct.lineWidth=3;
  ct.stroke();
  ct.closePath();

  /*ct.lineWidth = 6;
  ct.strokeStyle = "#333";
  ct.beginPath();
  ct.moveTo(155, 215);
  ct.bezierCurveTo(319, 306, 354, 75, 108, 329);
  ct.stroke();
  ct.closePath()*/

</script>
</body>
</html>
